<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
</head>
<body>
    <script src="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/paper.js"></script>
    <script>
      layui.use(['form', 'element'], function(){
       var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
 
 //监听导航点击
 element.on('nav(demo)', function(elem){
 //console.log(elem)
 layer.msg(elem.text());
 });

 layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
              elem: '#test1'
              ,width: '100%'
              ,height:'100%' //设置容器宽度
              ,arrow: 'always' //始终显示箭头
              //,anim: 'updown' //切换动画方式
            });

            carousel.render({
              elem: '#test4'
              ,width: '100%'
              ,height:'100%' //设置容器宽度
              ,arrow: 'always' //始终显示箭头
              ,indicator:'none'
              //,anim: 'updown' //切换动画方式
            });

            carousel.render({
              elem: '#test5'
              ,width: '100%'
              ,height:'100%' //设置容器宽度
              ,arrow: 'always' //始终显示箭头
              ,indicator:'none'
              //,anim: 'updown' //切换动画方式
            });
          });
        



          layui.use(['util', 'laydate', 'layer'], function(){
  var util = layui.util
  ,laydate = layui.laydate
  ,$ = layui.$
  ,layer = layui.layer;
  //固定块
  util.fixbar({
    bar1: true
    ,bar2: true
    ,css: {right: 50, bottom: 100}
    ,bgcolor: '#393D49'
    ,click: function(type){
      if(type === 'bar1'){
        layer.msg('icon 是可以随便换的')
      } else if(type === 'bar2') {
        layer.msg('两个 bar 都可以设定是否开启')
      }
    }
  });
  
  //倒计时
  var thisTimer, setCountdown = function(y, M, d, H, m, s){
    var endTime = new Date(y, M||0, d||1, H||0, m||0, s||0) //结束日期
    ,serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
     
    clearTimeout(thisTimer);
    util.countdown(endTime, serverTime, function(date, serverTime, timer){
      var str =date[1] + '时' +  date[2] + '分' + date[3] + '秒';
      lay('#test2').html(str);
      thisTimer = timer;
    });
  };
  setCountdown(2099,1,1);
  //XSS 过滤
  $('#test8').on('click', function(){ //监听按钮事件
    var str = util.escape($('#test7').val()); //执行 xss 过滤方法
    alert(str);
  });
});

          
});

      function showbuycar() {
          if (${name==null}){
              alert("未登录，请先登录");
          }
          else {
              window.location.href="${pageContext.request.contextPath}/show/buycar?name=${name}";
          }
      }


    </script>

    <div id="f-outer" style="width: 100%; height: 100%; background-color: #f0f0f8;">

        <div class="nav">
            <div style="padding-left: 80px;">
            <i class="layui-icon layui-icon-home" style="font-size: 20px; color: gray;"></i> 
           <a href="/index">店铺首页</a>
            <i class="layui-icon layui-icon-location" style="font-size: 20px; color: gray;"></i>
            安徽
            <div class="nav2">
                <span class="layui-breadcrumb" lay-separator="|" style="padding-left: 90px;">
                    <c:if test="${name==null}">
                        <a href="/view/login.jsp">登录</a>
                        <a href="/view/register.jsp">注册</a>
                    </c:if>
                    <a href="/user-center">${name}</a>

                    <a href="/view/self-center.jsp">个人中心</a>
                    <a href="/view/order.jsp" style="padding-left:20px ;">我的订单</a>
                    <a href="/view/collect.jsp"style="padding-left:20px ;">我的生鲜</a>
                    
                    <a href="/view/seckile.jsp"style="padding-left:20px ;">限时秒杀</a>
                    <a href="/view/forum.jsp"style="padding-left:20px ;">好物推荐</a>
                    <a href="/view/message.jsp"style="padding-left:20px ;">消息</a>
                   
                  </span>              
            </div>
            </div>
        </div>

        

        <div class="commen" style="background-color: white">
            <div class="title">
                <div class="title1" style="width: 100%; height: 80%;">
                    <img src="img/logo.png" style="height: 90px; width: 100%; margin-left: 77px;">
                </div>
                <div class="title2" style="width: 100%; height: 20%; background-color: black;color: blanchedalmond; text-align: center; margin-left: 77px;">
                    生鲜商品分类
                </div>
             </div>
    
            <div class="mid">
                <span id="parent">
                    <span class="c1"></span>
                    <span>
                        <input type="text" id="search">
                    </span>
                    <span style="position: relative;">
                        <a href="./view/product-class.html"><button class="b1">搜索</button></a>
                        
                    </span> 
                </span>


                <div class="last" style=" height: 100%; width: 400px; float: right;">
                     <button type="button" href="" class="layui-btn layui-btn-primary" onclick="showbuycar()">我的购物车</button>
                     <a href="http://www.daidu.com" class="layui-btn layui-btn-primary">扫码享优惠</a>
                </div>



                <div class="last" style=" height: 96px; width: 440px; ">
                    <div class="last" style=" height: 50%; width: 440px; ">
                        <span class="layui-breadcrumb" lay-separator="|" >
                    <a href="" style="padding-left:10px ;">芒果</a>
                    <a href=""style="padding-left:10px ;">樱桃</a>
                    <a href=""style="padding-left:10px ;">三文鱼</a>
                    <a href=""style="padding-left:10px ;">鸡蛋</a>
                    <a href=""style="padding-left:10px ;">牛排</a>
                    <a href=""style="padding-left:10px ;">榴莲</a>
                  </span>
                    </div>


                    <div class="last" style=" height: 50%; width: 440px; ">
                        <span class="layui-breadcrumb" lay-separator="|" >
                    <a href="/index"style="padding-left:20px ;">生鲜首页</a>
                    <a href="/view/forum.html"style="padding-left:20px ;">好物推荐</a>
                    <a href="/view/seckile.html"style="padding-left:20px ;">限时秒杀</a>
                    <a href="/view/product-class.html"style="padding-left:20px ;">猜你喜欢</a>
                  </span>
                    </div>
                </div>
            </div>
            </div>

         



        <div class="index-class" style="width: 89%; height: 500px;  margin: auto;">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="first">
                        <div class="choose" style="width: 85%; height: 512px; ">
                
                            <div class="layui-collapse">
                
                                <div class="layui-colla-item">
                                  <h2 class="layui-colla-title" >新鲜水果</h2>
                                  <div class="layui-colla-content layui-show" id="fruite"><span class="layui-breadcrumb" lay-separator="|" >
                                    <a href="/productClass?class=芒果" style="padding-left:2px ;">芒果</a>
                                    <a href="/productClass?class=桃子"style="padding-left:2px ;">桃子</a>
                                    <a href="/productClass?class=苹果"style="padding-left:2px ;">苹果</a>
                                   
                                  </span>
                                  </div>
                                </div>
                
                                <div class="layui-colla-item" id="seeAnimal">
                                  <h2 class="layui-colla-title">海鲜特产</h2>
                                  <div class="layui-colla-content layui-show"><span class="layui-breadcrumb" lay-separator="|" >
                                    <a href="/productClass?class=扇贝" style="padding-left:2px ;">扇贝</a>
                                    <a href="/productClass?class=虾"style="padding-left:2px ;">虾</a>
                                    <a href="/productClass?class=鱼"style="padding-left:2px ;">鱼</a>
                                   
                                    
                                  </span></div>
                                </div>
                
                                <div class="layui-colla-item">
                                  <h2 class="layui-colla-title">精选肉类</h2>
                                  <div class="layui-colla-content layui-show"><span class="layui-breadcrumb" lay-separator="|" >
                                    <a href="/view/product-class.jsp" style="padding-left:2px ;">芒果</a>
                                    <a href="/view/product-class.jsp"style="padding-left:2px ;">樱桃</a>
                                    <a href="/view/product-class.jsp"style="padding-left:2px ;">三文鱼</a>
                                   
                                   
                                  </span></div>
                                </div>
                
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">冷冻速食</h2>
                                    <div class="layui-colla-content layui-show"><span class="layui-breadcrumb" lay-separator="|" >
                                        <a href="/view/product-class.jsp" style="padding-left:2px ;">芒果</a>
                                        <a href="/view/product-class.jsp"style="padding-left:2px ;">樱桃</a>
                                        <a href="/view/product-class.jsp"style="padding-left:2px ;">三文鱼</a>
                                       
                                        
                                      </span></div>
                                  </div>
                
                                  <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">蔬菜蛋品</h2>
                                    <div class="layui-colla-content layui-show"><span class="layui-breadcrumb" lay-separator="|" >
                                        <a href="/view/product-class.jsp" style="padding-left:2px ;">芒果</a>
                                        <a href="/view/product-class.jsp"style="padding-left:2px ;">樱桃</a>
                                        <a href="/view/product-class.jsp"style="padding-left:2px ;">三文鱼</a>
                                       
                                        
                                      </span></div>
                                  </div>
                
                              </div>
                              </div>
                            </div>
                </div>

                <div class="layui-col-md8" style="margin-left: 100px;">
                    <div class="index-mid" style="width: 980px; height: 460px; float: right;">
                        <div class="layui-carousel" id="test1">
                            <div carousel-item>
                              <div><a href="/view/product-class.jsp"><img src="img/1.jpg" style="width: 980px; height: 475px;"></a></div>
                              <div><a href="/view/product-class.jsp"><img src="img/2.jpg" style="width: 980px; height: 475px;"></a></div>
                              <div><a href="/view/product-class.jsp"><img src="img/3.jpg" style="width: 980px; height: 475px;"></a></div>
                              <div><a href="/view/product-class.jsp"><img src="img/4.jpg" style="width: 980px; height: 475px;"></a></div>
                              <div><a href="/view/product-class.jsp"><img src="img/5.jpg" style="width: 980px; height: 475px;"></a></div>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="line" style="height: 40px; width: 100%;  background-image: url(img/b6.png);">
            <span id="fc1" style=" font-size: 40px; font-family: '宋体' serif; color:green; margin-left: 500px;">热卖精选</span>

        </div>



        
        <div class="show" style="background-image: url(/img/b5.png);width: 90%;height: 500px;background-repeat:no-repeat;margin: auto;">
                
            <div class="layui-row">
                <div class="layui-col-md4" style=" height: 200px; width: 37%; margin-top: 200px;">
                    <div class="f1" style=" height: 100px; width: 200px; margin-left: 200px; text-align: center;">
                        <span id="fc1" style=" font-size: 40px; font-family: '宋体' serif; color: white;">热卖精选</span>
                    </div>
                    <img src="img/b1.png">
                </div>
                <div class="layui-col-md1" style="height: 200px; margin-top: 200px; ">
                </div>
                <div class="layui-col-md6" style="border: 1px solid #efefef; height: 220px; margin-top: 200px; background-color: white;">
                    <div class="layui-carousel" id="test4">
                        <div carousel-item>
                          <div>

                              <div class="layui-row">
                                <c:forEach items="${picDTO}" var="item" begin="1" end="4" step="1">
                                      <a href="/product?id=${item.id}">
                                          <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center; margin-top: 10px;">
                                              <img src="${item.productImgUrl}" style="height: 120px; ">
                                              <p>${item.productDesc}</p>
                                              <p style="color: orange;">疯抢价：${item.productPrice}￥</p>
                                          </div>
                                      </a>
                                </c:forEach>
                    </div>

                </div>

                   </div>
                </div>
            </div>
        </div>
      </div> 




      <div class="line" style="height: 40px; width: 100%;  background-image: url(img/b6.png); margin-top: 50px;">
        <span id="fc1" style=" font-size: 40px; font-family: '宋体' serif; color:green; margin-left: 500px;">小二生鲜</span>
    </div>

    <div class="spe" style="width: 87%; height: 600px; margin: auto;  margin-top: 50px;">
        <div class="sp1" style="width: 100%; height: 300px; ">
            <div class="layui-row">
                <div class="layui-col-md2" style="background-image: url(img/b8.png); height: 300px; width: 200px; text-align: center;">
                    <div class="index-title" style="margin-left: 25px; padding-top: 50px;">
                        <span id="fc1" style=" font-size: 25px; font-family: '宋体' serif; color:white; ">新鲜水果</span>
                    </div>
                    <div class="index-title" style="margin-left: 25px;">
                        <span id="fc1" style=" font-size: 20px; font-family: '宋体' serif; color:white;">新鲜特供</span>
                    </div>
                    <div class="index-title" style="margin-top:25px ;">
                       <a style="color: white;">车厘子</a>
                       <a style="color: white;">猕猴桃</a>
                    </div>
                    <div class="index-title" style="margin-top:25px ;">
                        <a style="color: white;">车厘子</a>
                        <a style="color: white;">猕猴桃</a>
                     </div>
                    




                </div>
                    <div class="layui-col-md6" style="background-image: url(img/b9.jpg); height: 300px; ">
                    </div>
                        <div class="layui-col-md4" style="background-image: url(img/b10.png); height: 300px; ">
                        </div>
                </div>
            </div>

            <div class="sp2" style="width: 100%; height: 260px;  background-color: white;">
                <div class="layui-row">
                    <c:forEach items="${fruits}" var="item" begin="1" end="6" step="1">
                        <a href="/product?id=${item.id}">
                            <div class="layui-col-md2" id="${item.id}" style="border: 1px solid #efefef;">
                                <img src="${item.productImgUrl}" style="height: 150px; margin-left: 30px;">
                                <div style="margin-left: 30px; padding-top: 20px;">
                                    <a>${item.productDesc}</a>
                                </div>
                                <p style="font-size: 25px; color: red; margin-left: 25px;">￥${item.productPrice}</p>
                            </div>
                        </a>
                    </c:forEach>
                </div>



            </div>
        </div>
       
    </div>

    
    <div class="spe" style="width: 87%; height: 600px; margin: auto;  margin-top: 100px;">
        <div class="sp1" style="width: 100%; height: 300px; ">
            <div class="layui-row">
                <div class="layui-col-md2" style="background-image: url(img/b8.png); height: 300px; width: 200px; text-align: center;">
                    <div class="index-title" style="margin-left: 25px; padding-top: 50px;">
                        <span id="fc1" style=" font-size: 25px; font-family: '宋体' serif; color:white; ">海鲜水产</span>
                    </div>
                    <div class="index-title" style="margin-left: 25px;">
                        <span id="fc1" style=" font-size: 20px; font-family: '宋体' serif; color:white;">新鲜水产</span>
                    </div>
                    <div class="index-title" style="margin-top:25px ;">
                       <a style="color: white;">虾类</a>
                       <a style="color: white;">活鲜</a>
                    </div>
                    <div class="index-title" style="margin-top:25px ;">
                        <a style="color: white;">海鲜</a>
                        <a style="color: white;">扇贝</a>
                     </div>
                    
                </div>

                    <div class="layui-col-md6" style="background-image: url(img/f2.jpg); height: 300px; ">
                    </div>
                        <div class="layui-col-md4" style="background-image: url(img/f3.png); height: 300px;">
                        </div>
                </div>
            </div>

            <div class="sp2" style="width: 100%; height: 260px;  background-color: white;">
                <div class="layui-row">
                    <c:forEach items="${seeAnimal}" var="item" begin="1" end="6" step="1">
                        <a href="/product?id=${item.id}">
                            <div class="layui-col-md2" id="${item.id}" style="border: 1px solid #efefef;">
                                <img src="${item.productImgUrl}" style="height: 150px; margin-left: 30px;">
                                <div style="margin-left: 30px; padding-top: 20px;">
                                    <a>${item.productDesc}</a>
                                </div>
                                <p style="font-size: 25px; color: red; margin-left: 25px;">￥${item.productPrice}</p>
                            </div>
                        </a>
                    </c:forEach>
            </div>
        </div>
       
    </div>

   

    <div class="index-com" style="width: 100%; height: 434px;  margin-top: 100px; background-image: url(img/b3.jpg);">
        <div class="line" style="height: 40px; width: 100%;  background-image: url(img/b6.png); margin-top: 50px;">
            <span id="fc1" style=" font-size: 40px; font-family: '宋体' serif; color:white; margin-left: 500px;">限/时/特/供</span>
        </div>

        <div id="test2" style="color: green; font-size: 20px; margin-left: 130px; padding-top: 30px;"></div>

        <div class="tim-pro" style="width: 80%; height: 200px; border: 1px solid red; margin: auto; margin-top: 50px;">

            <div class="layui-carousel" id="test5">
                <div carousel-item>
                  <div> 
                      <div class="layui-row">
                          <c:forEach items="${picDTO}" var="item" begin="6" end="10" step="1">
                              <a href="/view/product.jsp?${item.id}">
                                  <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center; margin-top: 10px;">
                                      <img src="${item.productImgUrl}" style="height: 120px; ">
                                      <p>${item.productDesc}</p>
                                      <p style="color: orange;">疯抢价：￥${item.productPrice}</p>
                                  </div>
                              </a>
                          </c:forEach>
                </div>
            </div>merchants_product

            <div> 
                <div class="layui-row">
                    <c:forEach items="${picDTO}" var="item" begin="11" end="14" step="1">
                        <a href="/view/product.jsp?${item.id}">
                            <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center; margin-top: 10px;">
                                <img src="${item.productImgUrl}" style="height: 120px; ">
                                <p>${item.productDesc}</p>
                                <p style="color: orange;">疯抢价：￥${item.productPrice}</p>
                            </div>
                        </a>
                    </c:forEach>
          </div>
      </div>


                </div>
            </div>

        </div>

            
                

    </div>





    <div class="product" style="width: 100%; height: 6%;padding-top: 120px;">
        <div class="bott">
            <div class="bott-f">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="img/duo.png" alt="">品类齐全,轻松购物</li>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="img/kuai.png" alt="">多仓直发,极速配送</li>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="img/hao.png" alt="">正品行货,精致服务</li>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="img/sheng.png" alt="">天天低价,畅选无忧</li>
                        </div>
                    </div>
                </div>
    
                <div class="layui-row" style="margin-top: 15px;">
                    <div class="layui-col-md3">
                        <div>
                            <dt>购物指南</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">购物流程</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">会员介绍</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">常见问题</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">热销商品</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">联系客服</a>
                            </dd>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div>
                            <dt>配送方式</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">上门自提</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">211限时达</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">配送服务查询</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">配送费收取标准</a>
                            </dd>
                            <dd>
                                <a target="_blank" href="#">海外配送</a>
                            </dd>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div>
                            <dt>支付方式</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">货到付款</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">在线支付</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">分期付款</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">公司转账</a>
                            </dd>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div>
                            <dt>售后服务</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">售后政策</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">价格保护</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">退款说明</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">返修/退换货</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">取消订单</a>
                            </dd>
                        </div>
                    </div>
                </div>
            </div>

    </div>
    </div>
    </div>





</div>



    
   



</body>
</html>  